<template>
  <div class="tab-pages" style="position: relative">
    <!-- 多标签编辑页面 -->
    <el-tabs v-model="activeFragmentId">
      <!-- 基础信息页面 -->
      <el-tab-pane label="基础信息" name="fragmentBasic" style="width: 100%">
        <el-form
          class="tab-content-box"
          :style="'height:' + (mainContextHeight - 76) + 'px'"
          ref="fragmentBasicRef"
          :model="formData"
          :size="layoutStore.defaultFormItemSize"
          :rules="rules"
          label-width="90px"
          label-position="right"
          @submit.prevent
        >
          <div class="main-box">
            <el-scrollbar class="custom-scroll" style="flex-grow: 1; min-height: 100px">
              <el-row class="content-box" :gutter="16">
                <el-col :span="12">
                  <el-form-item label="班级名称" prop="StudentClass.className">
                    <el-input
                      class="input-item"
                      v-model="formData.StudentClass.className"
                      type="text"
                      placeholder=""
                      :clearable="true"
                      :show-word-limit="false"
                      maxlength=""
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属校区" prop="StudentClass.schoolId">
                    <dept-select
                      class="input-item"
                      v-model="formData.StudentClass.schoolId"
                      placeholder=""
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="班长" prop="StudentClass.leaderId">
                    <el-select
                      class="input-item"
                      v-model="formData.StudentClass.leaderId"
                      placeholder=""
                      :clearable="true"
                      :filterable="true"
                      @visible-change="leaderIdWidget.onVisibleChange"
                    >
                      <el-option
                        v-for="item in leaderIdWidgetDropdownList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="班级级别" prop="StudentClass.classLevel">
                    <el-select
                      class="input-item"
                      v-model="formData.StudentClass.classLevel"
                      placeholder=""
                      :clearable="true"
                      :filterable="true"
                      @visible-change="classLevelWidget.onVisibleChange"
                    >
                      <el-option
                        v-for="item in classLevelWidgetDropdownList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="完成课时" prop="StudentClass.finishClassHour">
                    <el-input-number
                      class="input-item"
                      v-model="formData.StudentClass.finishClassHour"
                      placeholder=""
                      :clearable="true"
                      :step="1"
                      :controls="true"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-scrollbar>
            <!-- 操作 -->
            <el-row class="footer-box mt-16" type="flex" justify="end" align="middle">
              <el-button
                :size="layoutStore.defaultFormItemSize"
                type="primary"
                @click="onUpdateClick()"
                >保存</el-button
              >
            </el-row>
          </div>
        </el-form>
      </el-tab-pane>
      <!-- 班级学生设置 -->
      <el-tab-pane label="班级学生" name="fragmentStudent" style="width: 100%">
        <el-form
          class="tab-content-box"
          :style="'height:' + (mainContextHeight - 76) + 'px'"
          ref="fragmentStudentRef"
          :model="formData"
          :size="layoutStore.defaultFormItemSize"
          :rules="rules"
          label-width="90px"
          label-position="right"
          @submit.prevent
        >
          <filter-box
            :item-width="350"
            @search="refreshFragmentStudent()"
            @reset="resetFragmentStudent"
          >
            <el-form-item label="学生姓名">
              <el-input
                class="filter-item"
                v-model="formFilter.studentNameFilter"
                type="text"
                placeholder=""
                :clearable="true"
                :show-word-limit="false"
                maxlength=""
              />
            </el-form-item>
            <el-form-item label="所属校区">
              <dept-select class="filter-item" v-model="formFilter.schoolIdFilter" placeholder="" />
            </el-form-item>
            <el-form-item label="经验等级">
              <el-select
                class="filter-item"
                v-model="formFilter.experienceLevelFilter"
                placeholder=""
                :clearable="true"
                :filterable="true"
                @visible-change="experienceLevelFilterWidget.onVisibleChange"
              >
                <el-option
                  v-for="item in experienceLevelFilterWidgetDropdownList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="所属年级">
              <el-select
                class="filter-item"
                v-model="formFilter.gradeIdFilter"
                placeholder=""
                :clearable="true"
                :filterable="true"
                @visible-change="gradeIdFilterWidget.onVisibleChange"
              >
                <el-option
                  v-for="item in gradeIdFilterWidgetDropdownList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </filter-box>
          <div class="main-box">
            <el-scrollbar class="custom-scroll" style="flex-grow: 1; min-height: 100px">
              <el-row class="content-box" :gutter="16">
                <el-col :span="24">
                  <table-box
                    ref="student"
                    :data="studentWidgetDataList"
                    style="height: 500px"
                    :size="layoutStore.defaultFormItemSize"
                    :row-config="{ isCurrent: false, isHover: true }"
                    :seq-config="{
                      startIndex: (studentWidgetCurrentPage - 1) * studentWidgetPageSize,
                    }"
                    :sort-config="{ remote: true }"
                    :hasExtend="true"
                    @sort-change="studentWidget.onSortChange"
                    @refresh="studentWidget.refreshTable()"
                  >
                    <template #operator>
                      <el-button
                        type="primary"
                        :size="layoutStore.defaultFormItemSize"
                        @click="onFormFlowSetClassStudentAIClick()"
                      >
                        设置班级学生
                      </el-button>
                    </template>
                    <vxe-column
                      title="序号"
                      type="seq"
                      fixed="left"
                      :index="studentWidget.getTableIndex"
                      :width="80"
                    />
                    <vxe-column title="学生姓名" field="studentName" />
                    <vxe-column title="所属校区" field="schoolIdDictMap.name" />
                    <vxe-column title="经验等级" field="experienceLevelDictMap.name" />
                    <vxe-column title="所属年级" field="gradeIdDictMap.name" />
                    <vxe-column title="注册时间" field="registerTime">
                      <template v-slot="scope">
                        <span>{{ formatDateByStatsType(scope.row.registerTime, 'day') }}</span>
                      </template>
                    </vxe-column>
                    <vxe-column title="操作" fixed="right">
                      <template v-slot="scope">
                        <el-button
                          link
                          type="primary"
                          :size="layoutStore.defaultFormItemSize"
                          @click.stop="onDeleteStudentClick(scope.row)"
                        >
                          删除
                        </el-button>
                      </template>
                    </vxe-column>
                    <template v-slot:empty>
                      <div class="table-empty unified-font">
                        <img src="@/assets/img/empty.png" />
                        <span>暂无数据</span>
                      </div>
                    </template>
                  </table-box>
                </el-col>
              </el-row>
            </el-scrollbar>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <label v-if="subPage" class="page-close-box" @click="onCancel()">
      <img src="@/assets/img/back2.png" alt="" />
    </label>
  </div>
</template>

<script lang="ts">
export default {
  name: 'formEditClassAI',
};
</script>

<script setup lang="ts">
import * as validateRules from '@/common/utils/validate';
import { VxeColumn, VxeTable } from 'vxe-table';
import { ANY_OBJECT } from '@/types/generic';
import { DictData, DictionaryBase } from '@/common/staticDict/types';
import { ElMessage, ElMessageBox, UploadFile } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { useCommon } from '@/common/hooks/useCommon';
import { useLayoutStore, useStaticDictStore } from '@/store';
import { useDownload } from '@/common/hooks/useDownload';
import { useDropdown } from '@/common/hooks/useDropdown';
import { DropdownOptions, ListData } from '@/common/types/list';
import { useTable } from '@/common/hooks/useTable';
import { TableOptions } from '@/common/types/pagination';
import { useUpload } from '@/common/hooks/useUpload';
import { useUploadWidget } from '@/common/hooks/useUploadWidget';
import { DictionaryController } from '@/api/system';
import {
  treeDataTranslate,
  findItemFromList,
  findTreeNodePath,
  findTreeNode,
  stringCase,
} from '@/common/utils';
import { StudentData } from '@/api/generated/studentController';
import { StudentClassData } from '@/api/generated/studentClassController';
import { CourseData } from '@/api/generated/courseController';
import { SysDeptData } from '@/api/generated/sysDeptController';
import {
  StudentController,
  StudentClassController,
  CourseController,
  SysDeptController,
} from '@/api/generated';
import FormFlowSetClassStudentAI from '@/pages/workflow/pages/flowAddClass/formFlowSetClassStudentAI.vue';
import DeptSelect from '@/components/DeptSelect/index.vue';
import UserSelect from '@/components/UserSelect/index.vue';

const router = useRouter();
const route = useRoute();
const layoutStore = useLayoutStore();
const { downloadFile } = useDownload();
const { getUploadHeaders, getUploadActionUrl, fileListToJson, parseUploadData, getPictureList } =
  useUpload();
const {
  Delete,
  Search,
  Edit,
  Plus,
  Refresh,
  Picture,
  Dialog,
  mainContextHeight,
  clientHeight,
  checkPermCodeExist,
  parseParams,
  parseArrayParams,
  formatDateByStatsType,
  getDateRangeFilter,
} = useCommon();
// 静态字典
const { staticDict: StaticDict } = useStaticDictStore();

// 表单参数
const props = withDefaults(
  defineProps<{
    // 是否子页面
    subPage?: number | string | boolean;
    // 班级ID，用于获取详情信息，为数据源主表主键字段
    classId?: ANY_OBJECT;
    // 是否在提交的时候调用后端接口保存数据，如果是false则代表这是一个级联表格的弹窗操作
    saveOnSubmit?: boolean;
    // 行数据，在级联表格的编辑操作时传入
    rowData?: ANY_OBJECT;
  }>(),
  {
    subPage: 0,
    classId: undefined,
    saveOnSubmit: true,
    rowData: undefined,
  },
);
// 当前Tab标签页
const activeFragmentId = ref<string | number>();
// 表单Form引用
const fragmentBasicRef = ref();
const fragmentStudentRef = ref();
const formFilter = reactive({
  // 学生姓名
  studentNameFilter: undefined,
  // 所属校区
  schoolIdFilter: undefined,
  // 经验等级
  experienceLevelFilter: undefined,
  // 所属年级
  gradeIdFilter: undefined,
});
const formFilterCopy = reactive({
  // 学生姓名
  studentNameFilter: undefined,
  // 所属校区
  schoolIdFilter: undefined,
  // 经验等级
  experienceLevelFilter: undefined,
  // 所属年级
  gradeIdFilter: undefined,
});
// 表单数据定义
type FormEditClassAIData = {
  StudentClass: StudentClassData;
};
// 表单数据
const formData = reactive<FormEditClassAIData>({
  StudentClass: {
    // 班级Id
    classId: undefined,
    // 班级名称
    className: undefined,
    // 所属校区
    schoolId: undefined,
    // 班长
    leaderId: undefined,
    // 完成课时
    finishClassHour: undefined,
    // 班级级别
    classLevel: undefined,
    // 创建用户
    createUserId: undefined,
    // 班级创建时间
    createTime: undefined,
    // 班级状态(0: 正常 1: 解散)
    status: undefined,
    // 班级课程数据
    courseList: [],
    // 学生管理数据
    studentList: [],
    sysDept: {
      // 部门Id
      deptId: undefined,
      // 部门名称
      deptName: undefined,
      // 显示顺序
      showOrder: undefined,
      // 父部门Id
      parentId: undefined,
      // 删除标记(1: 正常 -1: 已删除)
      deletedFlag: undefined,
      // 创建者Id
      createUserId: undefined,
      // 更新者Id
      updateUserId: undefined,
      // 创建时间
      createTime: undefined,
      // 更新时间
      updateTime: undefined,
    },
  },
});
// 表单验证规则
const rules = reactive({
  'StudentClass.schoolId': [{ required: true, message: '请输入所属校区', trigger: 'blur' }],
  'StudentClass.className': [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
  'StudentClass.leaderId': [{ required: true, message: '请输入班长', trigger: 'blur' }],
  'StudentClass.classLevel': [{ required: true, message: '请输入班级级别', trigger: 'blur' }],
  'StudentClass.finishClassHour': [
    { required: true, message: '请输入完成课时', trigger: 'blur' },
    {
      type: 'integer',
      message: '完成课时只允许输入整数',
      trigger: 'blur',
      transform: value => Number(value),
    },
    {
      type: 'number',
      min: 0,
      message: '完成课时必须大于0',
      trigger: 'blur',
      transform: value => Number(value),
    },
  ],
});

const instance = getCurrentInstance();
// 关闭页面
const onCancel = () => {
  router.go(-1);
  layoutStore.removeCachePage(route.fullPath as string);
  route.meta.refreshParentCachedPage = true;
};
// 是否为编辑表单
const isEdit = computed(() => {
  // 如果是级联操作那么判断rowData是否为空，普通操作判断传入的主键id是否为空
  return props.saveOnSubmit ? props.classId != null : props.rowData != null;
});
// 默认标签页
const defaultFragmentId = computed(() => {
  return 'fragmentBasic';
});

/**
 * 重置过滤值
 */
const resetFragmentBasic = () => {
  refreshFragmentBasic();
};
/**
 * 重置过滤值
 */
const resetFragmentStudent = () => {
  formFilter.studentNameFilter = undefined;
  formFilterCopy.studentNameFilter = undefined;
  formFilter.schoolIdFilter = undefined;
  formFilterCopy.schoolIdFilter = undefined;
  formFilter.experienceLevelFilter = undefined;
  formFilterCopy.experienceLevelFilter = undefined;
  formFilter.gradeIdFilter = undefined;
  formFilterCopy.gradeIdFilter = undefined;
  refreshFragmentStudent();
};
/**
 * 重置所有过滤值
 */
const resetFilter = () => {
  resetFragmentBasic();
  resetFragmentStudent();
};
/**
 * 保存，URL操作
 */
const onUpdateClick = () => {
  fragmentBasicRef.value.validate(valid => {
    if (!valid) return;
    let params: ANY_OBJECT = {
      studentClassDto: {
        classId: formData.StudentClass.classId,
        className: formData.StudentClass.className,
        schoolId: formData.StudentClass.schoolId,
        leaderId: formData.StudentClass.leaderId,
        finishClassHour: formData.StudentClass.finishClassHour,
        classLevel: formData.StudentClass.classLevel,
      },
    };

    let httpCall = isEdit.value ? StudentClassController.update : StudentClassController.add;
    httpCall(params)
      .then(res => {
        ElMessage.success('保存成功');
      })
      .catch(e => {
        // TODO: 异常处理
        console.error(e);
      });
  });
};
// 初始化页面数据
const loadStudentClassData = () => {
  return new Promise<void>((resolve, reject) => {
    // 如果不是编辑表单，那么不需要初始化页面数据
    if (!isEdit.value) {
      resolve();
      return;
    }
    // 级联操作使用rowData初始化数据
    if (!props.saveOnSubmit && props.rowData != null) {
      formData.StudentClass = JSON.parse(JSON.stringify(props.rowData));
      resolve();
      return;
    }
    // 非级联普通操作调用view接口获取表单数据
    let params: ANY_OBJECT = {
      classId: props.classId,
    };
    StudentClassController.view(params)
      .then(res => {
        formData.StudentClass = { ...res.data };
        if (formData.StudentClass.sysDept == null) {
          formData.StudentClass.sysDept = {
            deptId: undefined,
            deptName: undefined,
            showOrder: undefined,
            parentId: undefined,
            deletedFlag: undefined,
            createUserId: undefined,
            updateUserId: undefined,
            createTime: undefined,
            updateTime: undefined,
          };
        }
        resolve();
      })
      .catch(e => {
        reject(e);
      });
  });
};
/**
 * 班长下拉数据获取函数
 */
const loadLeaderIdDropdownList = (): Promise<ListData<DictData>> => {
  return new Promise((resolve, reject) => {
    const params = {};
    DictionaryController.dictStudent(params)
      .then(res => {
        resolve({
          dataList: res.getList(),
        });
      })
      .catch(e => {
        reject(e);
      });
  });
};
// 班长配置参数
const leaderIdOptions: DropdownOptions<DictData> = {
  loadData: loadLeaderIdDropdownList,
  isTree: false,
};
// 班长下拉组件
const leaderIdWidget = useDropdown(leaderIdOptions);
const { dropdownList: leaderIdWidgetDropdownList } = leaderIdWidget;
/**
 * 班级级别下拉数据获取函数
 */
const loadClassLevelDropdownList = (): Promise<ListData<DictData>> => {
  return new Promise((resolve, reject) => {
    DictionaryController.dictGlobalDict({ dictCode: 'ClassLevel', itemIdType: 'Integer' })
      .then(res => {
        resolve({
          dataList: res.getList(),
        });
      })
      .catch(e => {
        reject(e);
      });
  });
};
// 班级级别配置参数
const classLevelOptions: DropdownOptions<DictData> = {
  loadData: loadClassLevelDropdownList,
  isTree: false,
};
// 班级级别下拉组件
const classLevelWidget = useDropdown(classLevelOptions);
const { dropdownList: classLevelWidgetDropdownList } = classLevelWidget;
/**
 * 经验等级下拉数据获取函数
 */
const loadExperienceLevelFilterDropdownList = (): Promise<ListData<DictData>> => {
  return new Promise((resolve, reject) => {
    DictionaryController.dictGlobalDict({ dictCode: 'ExpLevel', itemIdType: 'Integer' })
      .then(res => {
        resolve({
          dataList: res.getList(),
        });
      })
      .catch(e => {
        reject(e);
      });
  });
};
// 经验等级配置参数
const experienceLevelFilterOptions: DropdownOptions<DictData> = {
  loadData: loadExperienceLevelFilterDropdownList,
  isTree: false,
};
// 经验等级下拉组件
const experienceLevelFilterWidget = useDropdown(experienceLevelFilterOptions);
const { dropdownList: experienceLevelFilterWidgetDropdownList } = experienceLevelFilterWidget;
/**
 * 所属年级下拉数据获取函数
 */
const loadGradeIdFilterDropdownList = (): Promise<ListData<DictData>> => {
  return new Promise((resolve, reject) => {
    DictionaryController.dictGlobalDict({ dictCode: 'Grade', itemIdType: 'Integer' })
      .then(res => {
        resolve({
          dataList: res.getList(),
        });
      })
      .catch(e => {
        reject(e);
      });
  });
};
// 所属年级配置参数
const gradeIdFilterOptions: DropdownOptions<DictData> = {
  loadData: loadGradeIdFilterDropdownList,
  isTree: false,
};
// 所属年级下拉组件
const gradeIdFilterWidget = useDropdown(gradeIdFilterOptions);
const { dropdownList: gradeIdFilterWidgetDropdownList } = gradeIdFilterWidget;
/**
 * 学生管理数据获取函数，返回Promise
 */
const loadStudentWidgetData = (params: ANY_OBJECT) => {
  if (params == null) params = {};
  params = {
    ...params,
  };
  return new Promise((resolve, reject) => {
    StudentClassController.listClassStudent(params)
      .then(res => {
        // 级联更新设置临时唯一id
        let tempTime = new Date().getTime();
        nextTick(() => {
          formData.StudentClass.studentList = studentWidgetDataList.value;
        });
        resolve({
          dataList: res.data.dataList.map((item, index) => {
            return {
              __cascade_add_temp_id__: tempTime + index,
              ...item,
            };
          }),
          totalCount: res.data.totalCount,
        });
      })
      .catch(e => {
        reject(e);
      });
  });
};
/**
 * 学生管理数据获取检测函数，返回true正常获取数据，返回false停止获取数据
 */
const loadStudentVerify = () => {
  formFilterCopy.studentNameFilter = formFilter.studentNameFilter;
  formFilterCopy.schoolIdFilter = formFilter.schoolIdFilter;
  formFilterCopy.experienceLevelFilter = formFilter.experienceLevelFilter;
  formFilterCopy.gradeIdFilter = formFilter.gradeIdFilter;
  return true;
};
/**
 * 设置班级学生，级联设置班级学生
 */
const onFormFlowSetClassStudentAIClick = (row?: StudentData) => {
  let params = {
    // 数据源主表主键id
    classId: props.classId,
    // 级联操作，所以这个参数为false，如果是非级联操作，那么它应该是true
    saveOnSubmit: false,
    // 已经选中的数据
    selectIdList: studentWidgetDataList.value.map(item => item.studentId),
  };

  Dialog.show('设置班级学生', FormFlowSetClassStudentAI, { area: ['1200px', '90px'] }, params)
    .then(res => {
      if (Array.isArray(res)) {
        let tempTime = new Date().getTime();
        studentWidgetDataList.value.push(
          ...res.map((item, index) => {
            return {
              ...item,
              // 级联添加每次添加后并不保存到数据库，设置临时的唯一值
              __cascade_add_temp_id__: tempTime + index,
            };
          }),
        );
        formData.StudentClass.studentList = studentWidgetDataList.value;
      }
    })
    .catch(e => {
      // TODO: 异常处理
      console.error(e);
    });
};
/**
 * 删除，询问操作
 */
const onDeleteStudentClick = (row?: StudentData) => {
  ElMessageBox.confirm('是否删除选中数据？')
    .then(res => {
      studentWidgetDataList.value = studentWidgetDataList.value.filter(item => {
        return item.__cascade_add_temp_id__ !== row?.__cascade_add_temp_id__;
      });
      formData.StudentClass.studentList = studentWidgetDataList.value;
    })
    .catch(e => {
      // TODO: 异常处理
      console.error(e);
    });
};
// 学生管理表格组件参数
const studentOptions: TableOptions<StudentData> = {
  loadTableData: loadStudentWidgetData,
  verifyTableParameter: loadStudentVerify,
  paged: false,
  rowSelection: false,
  orderFieldName: undefined,
  ascending: true,
};
// 学生管理表格组件
const student = ref();
const studentWidget = useTable(studentOptions);
const {
  dataList: studentWidgetDataList,
  currentPage: studentWidgetCurrentPage,
  pageSize: studentWidgetPageSize,
  totalCount: studentWidgetTotalCount,
} = studentWidget;
const onUploadError = () => {
  ElMessage.error('文件上传失败');
};
const onUploadLimit = () => {
  ElMessage.error('已经超出最大上传个数限制');
};
const refreshFragmentBasic = () => {
  // 刷新段落
};
const refreshFragmentStudent = () => {
  // 刷新段落
  studentWidget.refreshTable();
};
// 初始化表单
const formInit = () => {
  loadStudentClassData()
    .then(res => {
      // 初始化所有下拉组件选项数据以及上传组件数据
      leaderIdWidget.onVisibleChange(true).catch(e => {
        console.error(e);
      });
      classLevelWidget.onVisibleChange(true).catch(e => {
        console.error(e);
      });
      if (isEdit.value) refreshFragmentBasic();
      experienceLevelFilterWidget.onVisibleChange(true).catch(e => {
        console.error(e);
      });
      gradeIdFilterWidget.onVisibleChange(true).catch(e => {
        console.error(e);
      });
      if (isEdit.value) refreshFragmentStudent();
    })
    .catch(e => {
      // TODO: 异常处理
      console.error(e);
    });
};

onMounted(() => {
  activeFragmentId.value = defaultFragmentId.value;
  formInit();
});
</script>

<style lang="scss" scoped>
.tab-pages {
  padding: 0 !important;
  margin: 0 !important;
  background-color: #f6f6f6 !important;
  ::v-deep .el-tabs__header {
    margin-bottom: 0;
    background-color: white;
    border-top: 1px solid #e8e8e8;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    display: none;
  }
  ::v-deep .el-tabs__item {
    height: 44px;
    line-height: 44px;
  }
  ::v-deep .el-tabs__nav-wrap {
    padding-left: 24px;
  }
  ::v-deep .el-tabs__content {
    overflow: hidden;
  }

  .tab-content-box {
    margin: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .main-box {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 100px;
    background: white;
    padding: 16px 24px;
  }
}
</style>
